<template>
    <div class="authRole">
        <div class="top_menu">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">摄影平台</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="main_content" v-loading="loading">
            <div class="control display-flex justify-content-spaceBetween align-items-center">
                <h3>角色列表</h3>
                <div class="display-flex align-items-center">
                    <el-button type="primary" icon="plus" @click="toAddRole">添加</el-button>
                    <el-input
                            placeholder="请输入角色名"
                            icon="search"
                            v-model="search_key"
                            :on-icon-click="handleIconClick"
                            class="input-search">
                    </el-input>
                </div>
            </div>
            <el-card class="box-card">
                <div class="table">
                    <el-table
                            :data="tableData"
                            stripe
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="id"
                                label="id"
                                sortable
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="角色名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                sortable
                                prop="create_time"
                                label="创建时间">
                            <template scope="scope">
                                <span>{{ scope.row.create_time | getDate }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="管理员列表">
                            <template scope="scope">
                                <el-button
                                        size="small"
                                        type="primary"
                                        @click="ManagerList(scope.$index, scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="权限列表">
                            <template scope="scope">
                                <el-button
                                        size="small"
                                        type="primary"
                                        @click="PermissionList(scope.$index, scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="菜单列表">
                            <template scope="scope">
                                <el-button
                                        size="small"
                                        type="primary"
                                        @click="MenuList(scope.$index, scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template scope="scope">
                                <el-button
                                        size="small"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="small"
                                        type="danger"
                                        @click="confirmDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[15, 25, 50, 100]"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalSize">
                </el-pagination>
            </el-card>
        </div>
    </div>
</template>

<script src="../../js/auth/Role.js"></script>